<template>
	<view class="body">
		<view class="">{{dataList['info']['node_id'] || '加载中...'}}</view>
		<view class="">{{dataList['info']['province'] || '加载中...'}}{{dataList['info']['city'] || '加载中...'}}-{{dataList['info']['node']|| '加载中...'}}</view>
		<view class="horizontal-scroll" v-if="dataList['pressure']">
			<view class="fixed-content">
				<view class="td" bindtap="showAll">线路</view>
				<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.lineName}}</view>
			</view>
			<view class="scroll-content">
				<scroll-view class="scroll-view_w" scroll-x style="width:100%">
					<view class="item">
						<view class="td">极限带宽</view>
						<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.actualBw}}Mbps</view>
					</view>
					<!-- <view class="item">
						<view class="td">丢包压测带宽</view>
						<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.rtt}}</view>
					</view> -->
					<view class="item">
						<view class="td">极限带宽时RTT</view>
						<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.rtt}}Mbps</view>
					</view>
					<view class="item">
						<view class="td">极限带宽tcp重传率</view>
						<view class="td" bindtap="showAll" v-for="(item,index) in dataList['pressure'][0]['lines']" :key="index">{{item.tcpRetryMissRate}}%</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="change-ppp">
			<view>切换线路</view>
			<picker style="width: 60%;
				background-color:#eaeaea ;
				padding: 20rpx 10rpx;
				border-radius: 10rpx;
				font-size: 26rpx;" mode="selector" :range="pppArr" @change="changePPP">
				<view >{{pppText}}</view>
			</picker>
		</view>

		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">
				<view>宽带重传率(%)</view>
			</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
			 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
		</view>
		
	</view>
</template>

<script>
	let App = getApp()
	
	var _self;
	var canvasObj = {};
	import uCharts from '../../components/u-charts/u-charts.js';
	export default {
		data() {
			return {
				eid:0,
				dataList:[],
				title:'',
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,
				maxY:0,
				minY:0,
				lineData:[],
				ppp:1,
				pppArr:['ppp0','ppp1','ppp2','ppp3','ppp4','ppp5','ppp6','ppp7','ppp8'],
				pppText:'ppp0'
			}
		},
		
		onLoad(option) {
			this.eid = option.eid
			this.getInfo()
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);
			
		},
		
		methods: {
			getInfo(){
				
				this.$api.interfaceApi('rtRateLine')({
					eid:this.eid,
					sys:App.globalData.sys,
					ppp:this.ppp
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataList = res.data
						
						this.maxY = res.data.line.max
						this.minY = res.data.line.min
						
						this.lineData = res.data.line.list
						_self.fillData(res.data.line.list);
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			showLineA(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 50, 0, 15],
					
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: false, //开启图表拖拽功能
					xAxis: {
						disabled:true,
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 5,
						scrollShow: false,
						scrollAlign: 'left',
						gridEval:100
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'none',
						splitNumber: 5,
						min: this.minY,
						max: this.maxY,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						lineStyle: 'straight'
					},
				});		
			},
			
			touchLineA(e) {
				canvasObj['canvasLineA'].scrollStart(e);
			},
			
			moveLineA(e) {
				canvasObj['canvasLineA'].scroll(e);
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			
			touchEndLineA(e) {
				canvasObj['canvasLineA'].scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name
					}
				});
			},
			
			fillData(data) {
				this.serverData = data;
				this.tips = data.tips;
				let LineA = {
					categories: [],
					series: []
				};
				LineA.categories = data.LineA.categories;
				LineA.series = data.LineA.series;
		
				this.showLineA("canvasLineA", LineA);
			},
			
			changePPP(e){
				this.ppp = e.detail.value*1+1
				this.pppText = this.pppArr[e.detail.value]
				this.getInfo()
			}
			
			
		}
	}
</script>

<style lang="less">
	.body{
		padding: 20rpx;
		box-sizing: border-box;
		
		.change-ppp{
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.horizontal-scroll {
		  overflow: hidden;
		}
		
		.fixed-content {
		  float: left;
		  width: 35%;
		}
	
		.scroll-content {
		  float: left;
		  width: 65%;
		}
		
		.scroll-view_w {
		  width: 100%;
		  white-space: nowrap;
		}
		
		.scroll-view_w .item {
		  width: 100px;
		  display: inline-block;
		}
		
		.horizontal-scroll .th {
		  background: #75cae645;
		  height: 40px;
		  padding:0 10px;
		  line-height: 40px;
		  text-align: center;
		  font-size: 15px;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		}
		
		.horizontal-scroll .td {
		  background: #fff;
		  padding:0 10px;
		  font-size: 15px;
		  height: 40px;
		  line-height: 40px;
		  text-align: center;
		  overflow: hidden;
		  //text-overflow: ellipsis;
		  white-space: nowrap;
		  border-bottom:1rpx solid #eee;
		}
		.horizontal-scroll .td:nth-child(2n+1){
		  background: #75cae645;
		}
		
		.qiun-padding {
			padding: 2%;
			width: 96%;
		}
		
		.qiun-wrap {
			display: flex;
			flex-wrap: wrap;
		}
		
		.qiun-rows {
			display: flex;
			flex-direction: row !important;
		}
		
		.qiun-columns {
			display: flex;
			flex-direction: column !important;
		}
		
		.qiun-common-mt {
			margin-top: 10rpx;
		}
		
		.qiun-bg-white {
			background: #FFFFFF;
		}
		
		.qiun-title-bar {
			width: 96%;
			padding: 10rpx 2%;
			flex-wrap: nowrap;
		}
		
		.qiun-title-dot-light {
			border-left: 10rpx solid #0ea391;
			padding-left: 10rpx;
			font-size: 32rpx;
			color: #000000;
			display: flex;
		}
		
		/* 通用样式 */
		.qiun-charts {
			/* width: 750rpx; */
			/* width:100%; */
			height: 600rpx;
			background-color: #FFFFFF;
			margin-bottom: 100rpx;
		}
		
		.charts {
			/* width: 750rpx; */
			width:100%;
			height: 500rpx;
			background-color: #FFFFFF;
		}
		
		/* 横屏样式 */
		.qiun-charts-rotate {
			width: 700rpx;
			height: 1100rpx;
			background-color: #FFFFFF;
			padding: 25rpx;
		}
		
		.charts-rotate {
			width: 700rpx;
			height: 1100rpx;
			background-color: #FFFFFF;
		}
		
		/* 圆弧进度样式 */
		.qiun-charts3 {
			/* width: 750rpx;
			width:100%; */
			height: 250rpx;
			background-color: #FFFFFF;
			position: relative;
		}
		
		.charts3 {
			position: absolute;
			width: 250rpx;
			height: 250rpx;
			background-color: #FFFFFF;
		}
		
		.qiun-tip {
			display: block;
			width: auto;
			overflow: hidden;
			padding: 15rpx;
			height: 30rpx;
			line-height: 30rpx;
			margin: 10rpx;
			background: #ff9933;
			font-size: 30rpx;
			border-radius: 8rpx;
			justify-content: center;
			text-align: center;
			border: 1px solid #dc7004;
			color: #FFFFFF;
		}
		
		
	}
</style>
